<!doctype html>

<html lang="en">

	<head>

		<meta charset="utf-8">
		<title>way.js</title>
		<meta name="description" content="xxx">
		<meta name="author" content="x">

		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
		<link rel="stylesheet" href="index.css">

		<script src="../way.min.js"></script>
		<script src="index.js"></script>

	</head>
	<body>

		<div class="container-fluid">

			<div class="row">

				<div class="col-sm-6">

					<h1 style="color: rgba(0, 0, 0, .5);text-align: center;">
						way.js
					</h1>

					<div class="alert bg-warning">
						way.js is a simple, lightweight, persistent, framework-agnostic javascript library that allows you to bind DOM elements to an in-memory datastore (with no to little JS code).<br/>
						If you like buzzwords, that means super easy two-way databinding.<br/>
						Once you tried it here, check the
						<a href="https://github.com/gwendall/way.js" target="_blank">documentation</a>
						or play with some code on
						<a href="http://codepen.io/anon/pen/rihBs" target="_blank">Codepen</a> /
						<a href="http://jsfiddle.net/gwendall/s5zzc84m/" target="_blank">jsFiddle</a>.
					</div>

					<div class="out-box">

						<h3 style="margin: 0px;margin-bottom: 20px;">Example</h3>

						<div class="alert bg-success">
							This form is bound to the "formData" property and automatically parsed on each change.<br/>
							Data is set to persistent. Try refreshing the page after changing some of its values.<br/>
							Bonus: open the JS console to see watchers in action.
						</div>

						<form role="form" class="form-horizontal" way-data="formData" way-persistent>

							<div class="form-group">
								<label class="col-sm-3">Name</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" name="name" placeholder="Name" autocomplete="off">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3">Picture</label>
									<div class="col-sm-9">
									<input type="text" class="form-control" name="picture" placeholder="Enter an image's URL to see magic"
									autocomplete="off">
											<img class="img-responsive" way-data="formData.picture"
									way-default="http://creditworksusa.com/wp-content/uploads/2014/03/facebook-default-profile-photo.jpg">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3">Nationality</label>
								<div class="col-sm-9 checkbox">
									<label class="col-sm-12">
										<input type="checkbox" name="nationality[]" value="french">French
									</label>
									<label class="col-sm-12">
										<input type="checkbox" name="nationality[]" value="american">American
									</label>
									<label class="col-sm-12">
										<input type="checkbox" name="nationality[]" value="british">British
									</label>
									<label class="col-sm-12">
										<input type="checkbox" name="nationality[]" value="chinese">Chinese
									</label>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3">Gender</label>
								<div class="col-sm-9">
									<select class="form-control" name="gender">
										<option>Female</option>
										<option>Male</option>
										<option>Other</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3">Skills</label>
								<div class="col-sm-9">
									<a href="#" way-action-push="formData.skills" style="position: relative;
									top: 5px;
									left: 12px;">Add a skill</a>
								</div>
							</div>
							<div class="form-group" way-repeat="formData.skills" style="padding: 0px;">
								<label class="col-sm-3"></label>
								<div class="col-sm-9">
									<div class="item-entry">
										<input type="text" class="form-control" placeholder="Skill title"
										way-data="title" way-persistent>
										<div>
											<span style="margin-left: 10px;font-weight: bold;">Level</span>
											<label>
												<input type="radio" way-data="level" way-persistent value="noob">Noob
											</label>
											<label>
												<input type="radio" way-data="level" way-persistent value="intermediate">Intermediate
											</label>
											<label>
												<input type="radio" way-data="level" way-persistent value="advanced">Advanced
											</label>
											<label>
												<input type="radio" way-data="level" way-persistent value="god">God
											</label>
										</div>
										<div way-scope-break="true" style="padding: 8px 0px 0px 8px;
border-top: rgba(0, 0, 0, .1) solid thin;
margin-top: 8px;">
											Name (in case you forgot): <span way-data="formData.name"></span>
										</div>
									</div>
									<a href="#" way-action-remove="formData.skills.$$key" way-persistent>Remove</a>
								</div>
							</div>
						</form>

						<div class="alert bg-success">

							The only code required to achieve that (wording excluded) is the following:
							<br/><br/>

							<code class="html" style="font-size: 12px;">
								&lt;form way-data="formData" way-persistent&gt;
									<br/>
									<span class="indent-1">
										&lt;input type="text" name="name"&gt;
									</span>
									<br/>
									<span class="indent-1">
										&lt;input type="text" name="picture"&gt;
									</span>
									<br/>
									<span class="indent-1">
										&lt;img way-data="formData.picture" way-default="[some url]"&gt;
									</span>
									<br/>
									<span class="indent-1">
										&lt;input type="checkbox" name="nationality[]" value="french"&gt; [...]
									</span>
									<br/>
									<span class="indent-1">
										&lt;a way-action-push="formData.skills"&gt;Add a skill&lt;/a&gt;
									</span>
									<br/>
									<span class="indent-1">
										&lt;div way-repeat="formData.skills"&gt;
									</span>
									<br/>
									<span class="indent-2">
										&lt;input type="text" way-data="title" way-persistent&gt;
									</span>
									<br/>
									<span class="indent-2">
										&lt;input type="radio" value="noob" way-data="level" way-persistent&gt; [...]
									</span>
									<br/>
									<span class="indent-1">
										&lt;/div&gt;
									</span>
									<br/>
								&lt;/form&gt;
							</code>

						</div>

					</div>

				</div>

				<div class="col-sm-6 col-fixed">

					<div class="alert bg-warning">
						This is the data stored in way.js
						<div class="btn btn-sm btn-default pull-right" style="position:relative;top:-5px;" way-clear way-persistent>
							Clear data
						</div>
					</div>

					<pre way-data="__all__" way-json="true" way-default="{}"></pre>

				</div>

			</div>

		</div>

	</body>

</html>
